<template>
	<view class="select-active-item" v-for="(item,index) in list" :key="item.id" @click.stop="toActiveDetail(item.id,ishome)">
		<view class="active-bg" :style="{ backgroundImage: 'url(' +  baseurl+'/'+item.images[0] + ')' }">
			<view class="jl-tips">
				<!-- <image src="@/static/images/address.png" mode="aspectFill"></image> -->
				<view class="jl-number" style="color: #FE3052;">
					已报 {{item.after_apply_number}}/{{item.apply_number}}
				</view>
				
			</view>
			<view class="gl-tips">
				
				<view class="gl-number" style="color: #1984FF;">
					关联{{item.relation_task_total}}任务
				</view>
			</view>
		</view>
		
		<view class="active-info">
			<view class="active-type">{{item.type_text}}</view>
			<view class="active-title">{{item.title}}</view>
		</view>
		<!-- <view class="active-time">
			<image class="time-img" src="@/static/images/time.png" mode="aspectFill"></image>
			<view class="time">活动时间：{{item.start_at}}~{{item.end_at}}</view>
			<view class="number">已报 {{item.after_apply_number}}/{{item.apply_number}}</view>
		</view> -->
		<view class="active-address" style="display: flex;justify-content: space-between;">
			<view class="">
				<view class="address" style="overflow-x: hidden;">
					<image class="time-img" src="@/static/images/time.png" mode="aspectFill"></image>
					<view class="time">活动时间:{{convertTime(item.start_at, 'yyyy/MM/dd hh:mm')}}~{{convertTime(item.end_at, 'yyyy/MM/dd hh:mm')}}</view>
				</view>
				<!-- <view class="number" style="font-size: 30rpx;font-weight: bold;" v-if="item.activity_money">￥{{item.activity_money}}</view> -->
			</view>
			<view class="" style="font-size: 26rpx;">
				<span style="color: #FE3052;">￥{{item.activity_money}}</span> 
			</view>
		</view>
		<view class="active-address">
			<view class="address" @click.stop="toMap(item)">
				<image class="time-img" src="@/static/images/address_hui.png" style="margin-right: 10rpx;" mode="aspectFill"></image>
				<uv-text :customStyle="{fontSize:'28rpx',color: '#666666','max-width': '480rpx'}" :lines="1" :text="` 集合地址：${item.address}`"></uv-text>
			</view>
			<view class="number">距您:{{item.distance}}</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	import { convertTime } from "../utils/utils.js"
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		ishome: {
			type: String,
			default: () => ''
		},
		baseurl: {
			type: String,
			default: () => uni.getStorageSync('baseUrl')
		}
	})
	const toActiveDetail = (activeId, ishome) => {
		uni.navigateTo({
			url: '/pages/activeDetail/detail/index?activeId=' + activeId + '&ishome=' + ishome
		})
	}
	// 导航
	const toMap = (item) => {
		uni.openLocation({
			latitude: Number(item.lat),
			longitude: Number(item.lng),
			name: item.address,
			success: function() {
				console.log('success');
			},
			fail: (err) => {
				console.log('err', err);
			}
		});
	}
</script>

<style lang="scss" scoped>
	.select-active-item {
		margin-top: 30rpx;
		border-radius: 14rpx;
		overflow: hidden;

		.active-bg {
			position: relative;
			background-size: cover;
			width: 690rpx;
			height: 400rpx;
			.gl-tips{
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// background-color: rgba(116, 116, 116, 0.5);
				background-color: rgba(255, 255, 255, 0.5);
				padding: 10rpx;
				border-radius: 20rpx;
				position: absolute;
				right: 20rpx;
				top: 80rpx;
				.gl-number {
					margin-left: 4rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					font-weight: 600;
				}
			}
			.jl-tips {
				
				display: flex;
				align-items: center;
				justify-content: center;
				// background-color: rgba(116, 116, 116, 0.5);
				background-color: rgba(255, 255, 255, 0.5);
				padding: 10rpx;
				border-radius: 22rpx;
				position: absolute;
				right: 20rpx;
				top: 20rpx;

				image {
					width: 20rpx;
					height: 20rpx;
				}

				.jl-number {
					margin-left: 4rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					font-weight: 600;
				}
			}
		}

		.active-info {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.active-type {
				// width: 72rpx;
				line-height: 46rpx;
				height: 46rpx;
				padding: 0 10rpx;
				text-align: center;
				background: #FFF1F3;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FE3052;
			}

			.active-title {
				margin-left: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
				overflow: hidden;
				flex: 1;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.active-time {
			display: flex;
			align-items: center;
			padding-top: 20rpx;

			.time-img {
				width: 26rpx;
				height: 26rpx;
			}

			.time {
				margin-left: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.active-address {
			display: flex;
			// align-items: center;
			justify-content: space-between;
			padding: 10rpx 0;

			.address {
				display: flex;
				align-items: center;
				// width: 80%;

				.time-img {
					width: 26rpx;
					height: 26rpx;
				}

				.time {
					margin-left: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}
			}

			.number {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FE3052;
			}
		}
	}
</style>